<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>城市选择</title>
    <script src="js/rem.js"></script>
    <link rel="stylesheet" href="./css/css-comment.css">
    <link rel="stylesheet" href="./css/city.css">
    <script src="js/vue2.5.16.js"></script>
</head>
<body>
<div id="city">
    <div class="search">
        <input class="searchInput" type="text" v-model="searchCity" placeholder="输入城市名">
    </div>
    <div class="city-wrap">
        <p class="title">你所在地区</p>
        <ul class="reg-Wrap clearfix">
            <li class="reg-table" @click="currentCity(current)">{{current}}</li>
        </ul>
        <p class="title">热门地区</p>
        <ul class="reg-Wrap clearfix">
            <li class="reg-table" v-for="item in hotList" @touchstart="hot(item)">{{item}}</li>
        </ul>
    </div>
    <section @touchmove="mover=true">
        <div class="reg-box" v-for="item in searchList">
            <p ref="titleItem" class="reg-title">{{item.title}}</p>
            <ul>
                <li @touchend="city(item.name)" class="reg-list" v-for="item in item.elements">{{item.name}}</li>
            </ul>
        </div>
    </section>
    <ul class="sidebar">
        <li v-for="item in searchList" @touchstart="sidebar(item.title)">{{item.title}}</li>
    </ul>
</div>
<script src="js/jquery-3.2.1.min.js"></script>
<script>
    var app = new Vue({
        el: "#city",
        data: {
            searchCity: '',
            current: "苏州",
            cityList: [],
            cityLists: [],
            hotList: ["北京", "上海", "广州", "武汉", "深圳", "杭州", "成都", "南京", "郑州", "沈阳"],
            mover: false,
            searchList: []
        },
        mounted: function () {
            var that = this;
            $.getJSON('./js/city.json', function (data) {
                $.each(data, function (i, item) {
                    //console.log(item)
                    that.cityLists.push(item)
                    that.searchList.push(item)
                })
            })
        },
        methods: {
            currentCity:function (city) {
                window.location.href = "home.html?city=" + city
            },
            city: function (name) {
                if (!this.mover) {
                    //console.log(name)
                    this.current = name;
                    window.location.href = "home.html?city=" + name
                } else {
                    this.mover = !this.mover
                }
            },
            hot: function (hotName) {
                this.current = hotName;
                window.location.href = "home.html?city=" + hotName
            },
            sidebar: function (sidebar) {
                var title = this.$refs.titleItem;
                for (var i = 0, len = title.length; i < len; i++) {
                    if (sidebar == title[i].innerHTML) {
                        document.documentElement.scrollTop = title[i].offsetTop - 60;
                    }
                }
            },
        },
        watch: {
            searchCity: function (n, o) {
                var searchCity = n;
                var cityLists = JSON.parse(JSON.stringify(this.cityLists));
                cityList = cityLists.filter(function (item) {
                    var idData = false, self = this;
                    item.elements = item.elements.filter(function (it) {
                        if (String(it.name).indexOf(self.searchCity) !== -1) {
                            idData = true;
                            return idData;
                        }
                    })
                    return idData
                }, this)
                this.searchList = cityList;
            }
        }
    })
</script>
</body>
</html>